<template>
  <back-dialog-base
    :title="title"
    :visible="visibleDialog"
    width="700px"
    @onCommit="handleSubmit"
    :hasFooter="true"
    destroy-on-close
    @close="clear"
  >
    <template #content>
      <el-form ref="formRef" :model="formInline" style="position: relative" :rules="rules"   :validate-on-rule-change="false">
        <el-form-item label="用户姓名：" class="form-inline" prop="name">
          <el-input
            v-model.trim="formInline.name"
            placeholder="请输入用戶姓名"
            class="input-left"
          ></el-input>
        </el-form-item>
          <el-form-item label="描述：">
          <el-input
            v-model.trim="formInline.description"
            type="textarea"
            placeholder="请输入描述"
            class="input-textarea"
          ></el-input>
        </el-form-item>
      </el-form>
    </template>
  </back-dialog-base>
</template>

<script setup>
import { defineProps, reactive, ref, unref, defineEmits, onUpdated } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { addrole } from '@/api/role'
import { message } from '@/utils/message'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleDialog: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
})
const emits = defineEmits(['onReload'])
const formRef = ref(null)
const formInline = reactive({
  name: '',
  description: ''
})
const rules = reactive({
  name: [
    {
      required: true,
      message: '用户姓名不能为空',
      trigger: 'blur'
    }
  ]
})
onUpdated(() => {
  if (props.title === '新增用户') {
    clear()
  } else {
   formInline.name = props.rowData.name
   formInline.description = props.rowData.description
  }
})
const handleSubmit = () => {
  formRef.value.validate((val) => {
    if (val) {
      if (props.title === '修改角色') {
        // formInline.roleId = props.rowData.roleId
        // formInline.deptId = props.rowData.deptId
        save(Object.assign({ ...props.rowData }, formInline))
      } else if (props.title === '新增角色') {
        save(formInline)
      }
    } else {
      console.log('提交失败')
      return false
    }
  })
}

const save = async (data) => {
  console.log(data)
  const res = await addrole(data)
  if (res && res.id) {
    message({ type: 'success', message: '操作成功!' })
    clearForm()
    emits('onReload')
  }
}

const clearForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
}

const clear = () => {
  const form = unref(formRef)
  form.resetFields()
  clearformInline()
}

const clearformInline = () => {
  formInline.name = ''
  formInline.description = ''
}
</script>

<style lang="scss" scoped>
:deep(.el-textarea__inner) {
    &::placeholder {
      font-size: 15px;
    }
  }
.form-inline {
  .input-left {
    width: 100%;
    height: 32px;
  }
}
:deep(.el-form-item:nth-child(2)){
  margin-left: 35px;
}
:deep(.el-textarea){
width: 570px;
}
</style>
